<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <div class="myift">
      <input type="file" hidden accept="image/*" id="file" @change="change" />

      <van-cell title="头像" center>
        <label for="file">
          <van-image
            width="50"
            height="50"
            round
            fit="cover"
            :src="userInfo.avatar"
          />
        </label>
      </van-cell>

      <!-- 昵称 -->
      <van-cell
        title="昵称"
        is-link
        :value="userInfo.nickname"
        @click="showDialog"
      />
      <!-- 性别 -->
      <van-cell
        title="性别"
        is-link
        :value="userInfo.sex || '请选择性别'"
        @click="sexPickerShow = true"
      />
      <van-popup v-model="sexPickerShow" position="bottom">
        <van-picker
          show-toolbar
          :columns="['男', '女']"
          @confirm="sexPickerConfirm"
          @cancel="sexPickerShow = false"
        />
      </van-popup>
      <!-- 生日 -->
      <van-cell
        title="生日"
        is-link
        @click="datePickerShow = true"
        :value="userInfo.birthday || '请选择生日'"
      />
      <!--  生日弹窗  -->
      <van-popup v-model="datePickerShow" position="bottom">
        <van-datetime-picker
          @confirm="datePickerConfirm"
          @cancel="datePickerShow = false"
          :value="
            userInfo.birthday
              ? new Date(userInfo.birthday)
              : new Date('2000/01/01')
          "
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>

      <!-- 确定 -->
      <van-button
        style="width: 200px; margin: 0 auto"
        type="primary"
        size="large"
        block
        @click="save"
        >确定</van-button
      >

      <van-dialog v-model="nickDialogShow" title="修改昵称" show-cancel-button>
        <input type="text" v-model="userInfo.nickname" />
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import sexPickerMixin from "@/views/myift/sexPickerMixin";
import datePickerMixin from "@/views/myift/datePickerMixin";
import { setuserInfo } from "@/api/user";

export default {
  name: "myift",
  data() {
    return {
      nickDialogShow: false,
      userInfo: {},
    };
  },
  mixins: [sexPickerMixin, datePickerMixin],

  computed: {
    // ...mapState(["userInfo"]),
  },

  created() {
    // console.log(this.userInfo);
    this.userInfo = JSON.parse(JSON.stringify(this.$store.state.userInfo));
  },

  watch: {
    "$store.state.userInfo": {
      immediate: true,
      handler(n, o) {
        this.userInfo = JSON.parse(JSON.stringify(n));
      },
    },
  },

  methods: {
    ...mapActions(["upload"]),

    // 修改昵称
    showDialog() {
      this.nickDialogShow = true;
    },

    // 修改性别
    sexPickerConfirm(e) {
      // console.log(e);
      this.sexPickerShow = false;
      this.userInfo.sex = e;
    },

    // 保存数据更改
    save() {
      console.log(this.userInfo);
      let { nickname, avatar, _id: uid, birthday, sex } = this.userInfo;
      console.log(nickname, avatar, uid, birthday, sex);

      // 修改资料后数据更新并在一定时间后返回
      setuserInfo({
        nickname,
        avatar,
        uid,
        birthday,
        sex,
      }).then((res) => {
        console.log(res);
        this.$toast(res.msg);
        if (res.code == 0) {
          // 1.本地修改 比较繁琐 但是省流量
          // this.$store.commit('save',['userInfo',{nickname,avatar,_id:uid,birthday,sex}])
          //2. 调用接口修改 有点浪费 但是严谨
          this.$store.dispatch("getuserInfo", localStorage.getItem("token"));
          setTimeout((v) => {
            this.$router.back();
          }, 300);
        }
      });
    },

    async change(e) {
      let fileList = [...e.target.files].map((v) => {
        return {
          file: v,
        };
      });
      let [avatar] = await this.upload(fileList);
      console.log(avatar);
      // this.$set(this.userInfo,'avatar')
      this.userInfo.avatar = avatar;
    },
  },
};
</script>
<style lang="less">
.image {
  display: block;
  max-width: 100%;
}
</style>